<template>
	<view class="details">
		<view class="headf">
			<view class="boxkl" :style="{'margin-top':zhuangtai+'px'}">
				<view class="fanhui" @click="back"></view>
				<view class="titlk">礼服详情</view>
			</view>

		</view>
		<view class="headf" style="position: unset;opacity: 0;">
			<view class="boxkl" :style="{'margin-top':zhuangtai+'px'}">
				<view class="fanhui"></view>
				<view class="titlk">礼服详情</view>
			</view>
		</view>
		<view class="big_box">
			<view class="bimg-box">
				<!-- <video v-if="v_show==true" class="v_show" :src="listcontent.video_src" show-mute-btn="true"></video> -->
				<video v-if="v_show==true" class="w100 h100" show-mute-btn="true" :controls="controls"
					enable-play-gesture="true" :src="listcontent.video_src"></video>
				<swiper v-if="v_show==false" class="swiper w100 h100" :indicator-dots="false" :autoplay="false"
					:interval="1500" :duration="300">
					<swiper-item v-for="(item,index) in listcontent.images_src" :key="index">
						<image class="w100 h100" :src="item" mode="">
						</image>
					</swiper-item>
				</swiper>
				<!-- <img v-if="v_show==false" class='i_show' :src="listcontent.image_src" alt=""> -->
			</view>
			<view class="bnmk">

				<view class="btn" :class="{check:numid==1}" @click="change(1)">视频</view>
				<view class="su"></view>
				<view class="btn" :class="{check:numid==2}" @click="change(2)">图片</view>
			</view>
		</view>


		<view style="background: #fff;">
			<view class="price">
				<view class="pl">
					<view class="fu">￥</view>
					{{listcontent.price}}
				</view>
				<view class="pr" @click="fenXiang">
					<view class="pr_icon"></view>
					分享
				</view>
			</view>
			<view class="title">{{listcontent.title}}</view>
		</view>
		<view class="shopdeta">商品详情</view>
		<view class="deta_box">
			<bctos-rich-text :nodes="listcontent.content"></bctos-rich-text>
		</view>


		<view class="buy_box">
			<view class="buy" @click="orshow=true;">预约</view>
		</view>
		<view style="height:110rpx;"></view>

		<!-- 弹窗 -->

		<view class="price_popup" v-show="orshow" @click.stop="orshow=false;">
			<view class="box_inp" @click.stop>

				<view class="inph">
					<view class="icon" @click="orshow=false;"></view>
				</view>
				<view class="titled">预约后，商家会安排专业顾问致电您～</view>

				<view class="inpd">
					<input class="inpty" v-model="name" placeholder="怎么称呼您？" placeholder-class="inps" />
				</view>
				<view class="inpd">
					<input class="inpty" v-model="phone" placeholder="您的联系方式" placeholder-class="inps" />
				</view>
				<view class="inpd" @click="orshow=false;selectTime=true;">
					<!-- <input class="inpty" v-model="time" placeholder="结婚大概日期" placeholder-class="inps" /> -->
					<view :class="time?'':'inps'" style="display: flex;flex: 1;align-items: center;padding-left: 36upx;" :style="time?'color:#000':''">
						{{time?time:'结婚大概日期'}}
					</view>
					<view class="ickl"></view>
				</view>
				<view class="enty" @click="enter">确定</view>
			</view>
		</view>


		<!-- 弹框 -->

		<view class="price_popup" v-show="tshow" @click="tshow=false;">
			<view class="tikun" @click.stop="">
				<view class="txt">{{code=='1'?"请保持电话畅通，工作人员稍后联系您～":"不可重复预约"}}</view>
				<view class="ent" @click="tshow=false;">确认</view>
			</view>
		</view>

		<!-- <view class="movable_box">
			<movable-area style="height: 1224upx;">
				<movable-view :x="x" :y="y" direction="vertical" scale="true" out-of-bounds="true" @change="onChange">
					
				</movable-view>
			</movable-area>
		</view> -->
		<view class="kefu flex" @click="onPhone">
			<view class="kefu_img">
				<image class="w100 h100" src="@/static/kefu.png" mode=""></image>
			</view>
			<view class="kefu_txt s28 family f500">
				客服
			</view>
		</view>
		<view class="price_popup" v-if="selectTime" @click="selectTime=false;">
			<view style="position: absolute;bottom: 0;" @click.stop="">
				<view class="head_riqi_box w750 flex">
					<uni-datetime-picker type="date" :value="startTime" start="2021-3-20" end="2111-6-30"
						@change="changeTime" />
					<view class="zhi_txt s26 family f500">
						至
					</view>
					<uni-datetime-picker type="date" :value="endTime" start="2021-3-20" end="2111-6-30" @change="changeTime1" />
					<view class="shaixuan_btn s24 family f500 txtali" @click.stop="screenTime">
						确定
					</view>
				</view>
				<view class="" style="height: 100rpx;background: #fff;">
					
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<!-- :show="show" -->
		<share-box ref="child" :type="shareType"></share-box>
	</view>
</template>

<script>
	import shareBox from '@/components/share.vue';//分享
	export default {
		data() {
			return {
				numid: 1, //1视频 2图片
				orshow: false, // 预约弹窗
				tshow: false, //预约成功弹窗
				zhuangtai: '', //状态栏高度
				listid: '',
				listcontent: {},
				v_show: true, //true 视频 false 图片
				name: "", //姓名
				phone: '', //联系方式
				selectTime:false,//选择时间
				time: '', //日期
				startTime:'',
				endTime:'',
				code: '', //是否预约  1 没有
				kefuTel: '',
				shareType:6,
			}
		},
		components: {
			shareBox,
		},
		computed: {

		},
		onLoad(option) {
			if(option.shop_id){
				this.$store.state.shopsname.id = option.shop_id;
			}
			this.listid = option.id;
			let system = uni.getSystemInfoSync()
			this.zhuangtai = system.statusBarHeight;
			this.getlistcon();
			this.getKefuTel();
		},
		mounted() {

		},
		methods: {
			// 点击分享按钮
			fenXiang(){
				this.$refs.child.xianshi(this.listid);
			},
			//选择时间
			changeTime(e) {
				this.startTime = e;
			},
			changeTime1(e) {
				this.endTime = e;
			},
			screenTime(){
				this.time = this.startTime + '至' + this.endTime;
				this.selectTime = false;
				this.orshow = true;
			},
			// 点击客服
			onPhone() {
				uni.makePhoneCall({
					phoneNumber: this.kefuTel
				})
			},
			change(e) {
				this.numid = e;
				if (e == 1) {
					this.v_show = true
				} else {
					this.v_show = false
				}
			},
			back() {
				uni.navigateBack()
			},
			getlistcon() {
				this.$request({
					url: 'wedding/dress_info',
					method: 'POST',
					data: {
						id: this.listid
					}
				}).then(res => {
					res.data.data.content = res.data.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
						(match, capture) => {
							var img = `<img style="display: block; width: 100%;" src="${capture}">`;
							return img;
						});
					res.data.data.content = res.data.data.content.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi,
						(match, capture) => {
							var video = `<video style="display: block; width: 100%;" src="${capture}">`;
							return video;
						});
					this.listcontent = res.data.data;
					if(!this.listcontent.video_src||'https://sz.vvv5g.com'==this.listcontent.video_src){
						this.change(2);
					}
				})
			},
			// 确定预约
			enter() {
				if (!uni.getStorageSync('userInfo').id) {
					this.$wanlshop.msg('请先登录再操作');
					return;
				}
				if (this.name === '') {
					this.$wanlshop.msg('请输入姓名');
					return;
				}
				if (this.phone === '') {
					this.$wanlshop.msg('请输入联系方式');
					return;
				}
				if (this.time === '') {
					this.$wanlshop.msg('请选择结婚日期');
					return;
				}
				this.$request({
					url: 'wedding/dress_appointment',
					method: 'POST',
					data: {
						shop_id: this.$store.state.shopsname.id,
						to_id: this.listid,
						user_id: uni.getStorageSync('userInfo').id,
						time_star: this.startTime,
						time_end: this.endTime,
						phone: this.phone,
						name: this.name,
						type: 0
					}
				}).then(res => {
					this.code = res.data.code;
					this.orshow = false;
					this.tshow = true;
				})
			},
			// 获取客服手机号
			getKefuTel() {
				this.$request({
					url: 'partners/config',
					method: 'POST',
					data: {}
				}).then(res => {
					this.kefuTel = res.data.data.tel_phone;
				})
			},
		}
	}
</script>
<style>
	page {
		background: #AEAEAE;
	}
</style>
<style scoped lang="scss">
	.headf {
		position: fixed;
		border-top: 1rpx solid transparent;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fff;

		.boxkl {
			width: 100%;
			height: 88upx;
			position: relative;
			display: flex;

			.fanhui {
				width: 36upx;
				height: 36upx;
				background: url(../../static/tab_jian.png)no-repeat center;
				background-size: 100%;
				margin-left: 28upx;
				margin-top: 26upx;
			}

			.titlk {
				height: 88upx;
				line-height: 88upx;
				margin-left: 12upx;
				font-size: 32upx;
				color: #000;
			}
		}

	}

	.big_box {
		width: 750upx;
		height: 750upx;
		background: #7D7C80;
		position: relative;

		.bimg-box {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			.v_show {
				width: 100%;
				height: 100%;
			}

			.i_show {
				width: 100%;
				height: 100%;
			}
		}

		.bnmk {
			position: absolute;
			width: 300upx;
			height: 48upx;
			display: flex;
			left: 50%;
			margin-left: -150upx;
			bottom: 26upx;
			justify-content: space-between;

			.btn {
				width: 116upx;
				height: 48upx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 24upx;
				border: 2upx solid rgba(255, 255, 255, 0.3);
				text-align: center;
				line-height: 48upx;
				color: #fff;
				font-size: 24upx;

				&.check {
					background: rgba(0, 0, 0, 0.5);
				}
			}

			.su {
				width: 1upx;
				height: 25upx;
				background: #fff;
				margin-top: 11upx;
			}
		}
	}

	.price {
		width: 690upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-top: 20upx;

		.pl {
			color: #FF3F4A;
			font-size: 42upx;
			font-weight: 550;

			.fu {
				font-size: 32upx;
				display: inline-block;
			}
		}

		.pr {
			margin-top: 10upx;
			color: #000;
			font-size: 28upx;

			.pr_icon {
				width: 27upx;
				height: 27upx;
				background: url(../../static/fullDress/share.png)no-repeat center;
				background-size: 100%;
				display: inline-block;
				vertical-align: middle;
				margin-top: -8upx;
				margin-right: 8upx;
			}
		}
	}

	.title {
		width: 690upx;
		margin: 0 auto;
		color: #000;
		font-size: 32upx;
		line-height: 50upx;
		margin-top: 20upx;
		padding-bottom: 42upx;
	}

	.shopdeta {
		width: 100%;
		height: 72upx;
		background: #F4F4F4;
		text-align: center;
		color: #333;
		font-size: 24upx;
		line-height: 72upx;
	}

	.deta_box {
		width: 750upx;
		background: #AEAEAE;
	}

	.buy_box {
		height: 90upx;
		background: #fff;
		padding-top: 10rpx;
		width: 100%;
		left: 0;
		bottom: 0;
		position: fixed;

		.buy {
			width: 686upx;
			height: 80upx;
			background: #111111;
			border-radius: 40upx;
			margin: 0 auto;
			color: #fff;
			font-size: 28upx;
			line-height: 80upx;
			text-align: center;
		}
	}

	.price_popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(17, 17, 17, 0.5);

		.box_inp {
			width: 100%;
			background: #fff;
			position: absolute;
			height: 700upx;
			left: 0;
			bottom: 0;
			border-radius: 32upx 32upx 0px 0px;
			animation: move .2s 0s linear normal;

			.inph {
				background: linear-gradient(180deg, #FFF7EA 0%, rgba(255, 255, 255, 0) 100%);
				height: 100upx;
				border-radius: 32upx 32upx 0px 0px;

				.icon {
					width: 36upx;
					height: 36upx;
					background: url(../../static/tab_jian.png)no-repeat center;
					background-size: 100%;
					margin-left: 28upx;
					padding-top: 42upx;
				}
			}

			.titled {
				width: 686upx;
				margin: 0 auto;
				color: #111111;
				margin-top: 10upx;
				font-size: 30upx;
			}

			.inpd {
				width: 686upx;
				height: 80upx;
				border-radius: 40upx;
				border: 1px solid #CCCCCC;
				margin: 0 auto;
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;

				.inpty {
					margin-left: 36upx;
					height: 80upx;
					background: transparent;
					width: 400upx;
					color: #000;
					font-size: 28rpx;
				}

				.inps {
					color: #CCCCCC;
					font-size: 28rpx;
				}

				.ickl {
					width: 38rpx;
					height: 38rpx;
					margin-right: 36rpx;
					margin-top: 21rpx;
					background: url(../../static/Vector.png)no-repeat center;
					background-size: 100%;
				}
			}

			.enty {
				width: 686upx;
				height: 80upx;
				background: #111111;
				border-radius: 40upx;
				margin: 0 auto;
				margin-top: 64upx;
				color: #fff;
				text-align: center;
				line-height: 80upx;
				font-size: 28upx;
			}
		}

		@keyframes move {
			from {
				height: 0upx;
			}

			to {
				height: 700upx;
			}
		}
	}

	.tikun {
		width: 468upx;
		background: #FFFFFF;
		border-radius: 32upx;

		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -234upx;
		margin-top: -135upx;

		.txt {
			width: 354upx;
			text-align: center;
			color: #000;
			font-size: 30upx;
			margin: 0 auto;
			padding-top: 50upx;
			font-weight: 550;
			line-height: 50rpx;
		}

		.ent {
			border-top: 2upx solid #F4F4F4;
			text-align: center;
			margin-top: 30upx;
			line-height: 92upx;
			font-size: 32upx;
			color: #EBBE87;
		}
	}
	.kefu {
		width: 160upx;
		height: 76upx;
		background: rgba(72, 157, 218, 0.6);
		box-shadow: 0upx 0upx 14upx 2upx rgba(0, 0, 0, 0.18);
		border-radius: 37upx 0upx 0upx 37upx;
		position: fixed;
		right: 0;
		top: 865upx;
		z-index: 999;

		.kefu_img {
			width: 40upx;
			height: 33upx;
			margin-top: 20upx;
			margin-left: 20upx;
		}

		.kefu_txt {
			color: #fff;
			margin-top: 20upx;
			margin-left: 16upx;
		}
	}

	// 选择日期
	.head_riqi_box {
		height: 94upx;
		background: #FFFFFF;

		/deep/ .uni-date {
			width: 290upx;
			height: 50upx;
			background: #F3F3F3;
			border-radius: 58upx 58upx 58upx 58upx;
		}

		/deep/ .uni-date-x--border {
			border: none !important;
		}

		/deep/ .uni-date-x {
			margin-top: 6upx;
		}

		.zhi_txt {
			color: #000000;
			line-height: 94upx;
		}

		.shaixuan_btn {
			width: 104upx;
			height: 50upx;
			background: #666666;
			border-radius: 25upx 25upx 25upx 25upx;
			line-height: 50upx;
			color: #FFFFFF;
			margin-top: 18upx;
			margin-left: 6upx;
		}
	}
</style>
